<template>
  <div>
    <a-modal
      title="商品详情"
      :visible="visible"
      :confirm-loading="loading"
      :width="720"
      @ok="modalOK"
      @cancel="cancelModal"
    >
      <a-spin :spinning="loading">
        <a-form
          :form="form"
          v-bind="formLayout"
          @submit="formSubmit"
          v-if="detailData"
        >
          <a-row :gutter="24">
            <a-col :span="12">
              <a-form-item label="商品ID">
                <span>{{ detailData.id }}</span>
              </a-form-item>
            </a-col>
            <a-col :span="12">
              <a-form-item
                label="商品名称"
                v-decorator="['name', {rules: [{ required: true, message: '商品名称必须填写!' }]}]"
              >
                <a-input
                  v-model="detailData.name"
                />
              </a-form-item>
            </a-col>
          </a-row>
          <a-row :gutter="24">
            <a-col :span="12">
              <a-form-item
                label="商品价格"
                v-decorator="['price', {rules: [{ required: true, message: '商品价格必须填写!' }]}]"
              >
                <a-input
                  v-model="detailData.price"
                />
              </a-form-item>
            </a-col>
            <a-col :span="12">
              <a-form-item
                label="能否购买"
              >
                <a-select
                  @change="canbuyChange"
                  v-decorator="['canBuy', {'initialValue': '0', rules: [{ required: true, message: '能否购买必须选择!' }]}]"
                >
                  <a-select-option value="0">是</a-select-option>
                  <a-select-option value="1">否</a-select-option>
                </a-select>
              </a-form-item>
            </a-col>
          </a-row>
          <a-row :gutter="24">
            <a-col :span="12">
              <a-form-item
                label="商品说明"
              >
                <a-input v-model="detailData.summary" v-decorator="['summary', {'initialValue': ''}]"/>
              </a-form-item>
            </a-col>
          </a-row>
        </a-form>
      </a-spin>
    </a-modal>
  </div>
</template>

<script>
import { getCommoditiesLists, saveCommoditiesLists } from '@/api/commodities'
export default {
  name: 'CommoditiesDetail',
  data () {
    return {
      canBuy: 0,
      loading: false,
      detailData: null,
      formLayout: {
        labelCol: {
          span: 6
          // xs: { span: 24 },
          // sm: { span: 7 }
        },
        wrapperCol: {
          span: 18
          // xs: { span: 24 },
          // sm: { span: 13 }
        }
      },
      form: this.$form.createForm(this, { id: 10000 })
    }
  },
  props: {
    visible: {
      type: Boolean,
      required: true
    },
    model: {
      type: Object,
      default: null
    }
  },
  watch: {
    visible (news, olds) {
      if (news) {
        this.init()
      }
    }
  },
  methods: {
    init () {
      console.log(this.model)
      getCommoditiesLists({ id: this.model.id }).then(res => {
        this.detailData = res.data[0]
        this.canBuy = (this.detailData.canBuy) ? 0 : 1
        this.$nextTick(() => {
          this.form.setFieldsValue({
            'canBuy': this.canBuy + ''
          })
        })
      }).catch(e => {
        console.error(e)
      })
    },
    modalOK () {
      this.loading = true
      saveCommoditiesLists(this.detailData.id, this.detailData).then(res => {
        this.loading = false
        this.$emit('ok')
      }).catch(e => {
        this.loading = false
        console.error(e)
      })
      // console.log(saveCommoditiesLists)
      // this.$emit('cancel')
    },
    cancelModal () {
      this.$emit('cancel')
    },
    formSubmit () {
      console.log('formSubmit')
    },
    canbuyChange () {
      console.log('canbuyChange')
    }
  }
}
</script>

<style lang="scss" scoped>

</style>
